{% extends "index/mainContent.html.twig" %}

{% block headerCssInclude %}
    <link rel="stylesheet" type="text/css" href="{{assetsLib}}/ketchup/css/jquery.ketchup.css" />
{% endblock %}
    
{% block headerJsInclude %}
    <script type="text/javascript" src="{{assetsLib}}/twitter_bootstrap/js/bootstrap-modal.js"></script>
    <script type="text/javascript" src="{{assetsLib}}/ketchup/jquery.ketchup.all.min.js"></script>
    <script type="text/javascript" src="{{assetsJs}}/main/ketchup-extension.js"></script>
    
    <script type="text/javascript" src="{{assetsLib}}/jquery/development-bundle/ui/i18n/jquery-ui-i18n.js"></script>
    <script type="text/javascript" src="{{assetsJs}}/events/formAddNewEvent.js"></script>
    <script type="text/javascript" src="{{assetsJs}}/events/sliderValueChanged.js"></script>
    <script type="text/javascript" src="{{assetsJs}}/events/main.js"></script>
{% endblock %}
    
{% block bodyJs %}
{% endblock %}
    
{% block mainContent %}

<div class="page-header">
    <h3 id="sliderVal">-</h3>
    <div id="yearSlider" class="headerEm" style="width: 45%;float: left;"></div>
    <div id="monthSlider" class="headerEm" style="width: 45%;float:left;margin-left: 50px"></div>
    <div style="clear: both"></div>
    <br/>
    <div style="float: left">
        <ul id="icons" class="ui-widget ui-helper-clearfix">
            <li class="ui-state-default ui-corner-all" title="{{dict('addNewEventCaption')}}" data-controls-modal="modalAddEvent">
                <span class="ui-icon ui-icon-plus"></span>
            </li>
            <li style="margin-left: 100px">
            </li>
        </ul>
    </div>
    <div style="float: right">
        <a href="" id="stateWorkReadLink">
            <img class="stateWorkPic" src="{{assetsPic}}/stateWorkRead" width="32" height="32"/>
        </a>
        <a href="" id="stateWorkEditLink">
            <img class="stateWorkPic stateWorkInactive" src="{{assetsPic}}/stateWorkEdit" width="32" height="32"/>
        </a>
        <a href="" id="stateWorkTrashLink">
            <img class="stateWorkPic stateWorkInactive" src="{{assetsPic}}/stateWorkTrash" width="32" height="32"/>
        </a>
    </div>
    <div style="clear: both"></div>
</div>
    <div id="eventsContent"></div>
    
    {% include '/events/formAddNewEvent.html.twig' %}

<input type="hidden" id="yearSliderMin" value="{{yearSlider.minTime}}" />
<input type="hidden" id="yearSliderMax" value="{{yearSlider.maxTime}}" />
<input type="hidden" id="getParamTimeStart" value="{{getParamTimeStart}}" />
<input type="hidden" id="getParamTimeEnd" value="{{getParamTimeEnd}}" />
{% endblock %}